<template>
	<view class="content">
		<u-navbar title="首页" title-color="#FFF" :background="navBackground" :is-fixed="true" :border-bottom="false" :is-back="false"></u-navbar>
		<swiper class="swiper">
			<swiper-item>
				<view class="weather h-100 d-flex-jsb">
					<view class="left d-flex flex-column" v-if="weather">
						<view>
							<text class="temp">{{ weather.now.temp }}℃</text>
							<text class="text">{{ weather.now.text }}</text>
						</view>
						<text class="location">{{ weather.location.name ? weather.location.name : weather.location.city }}</text>
					</view>
					<view class="right d-flex flex-column" v-if="weather"><image :src="weather.now.text | iconSrc(iconList)" mode="widthFix" class="icon"></image></view>
				</view>
			</swiper-item>
		</swiper>
		<z-page :showNav="false" :list="mainList"></z-page>
	</view>
</template>

<script>
import commonData from '@/common/common.js';
export default {
	data() {
		return {
			navBackground: this.$navBackground,
			iconList: commonData.weatherIcons,
			mainList: [
				// {
				// 	name: '纪念日',
				// 	path: '/pages/commemorationDay/commemorationDay'
				// },
				{
					name: '选择困难症',
					path: '/pages/choose/index'
				},
				{
					name: '轻松一下',
					path: '/pages/relaxed/index'
				},
				// {
				// 	name: 'TEST',
				// 	path: '/pages/test/test'
				// }
			],
			weather: '',
			lat: '',
			lng: ''
		};
	},
	onLoad() {
		this.getLocation();
	},
	onShow() {
		this.authSetting();
	},
	onPullDownRefresh() {
		this.authSetting('pull');
	},
	filters: {
		iconSrc(t, v) {
			var src;
			for (let s of v) {
				if (t == s.name) {
					src = s.src;
				}
			}
			return src;
		}
	},
	methods: {
		// 获取当前经纬度
		getLocation() {
			let _this = this;
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					_this.lat = res.latitude;
					_this.lng = res.longitude;
					_this.getWeather();
				},
				fail: err => {
					console.log(err);
					if (_this.weather) {
						uni.stopPullDownRefresh();
					} else {
						_this.$u.toast('定位失败');
					}
				}
			});
		},
		// 获取天气信息
		getWeather() {
			this.$cloudApi.call({
				name: 'weather',
				data: {
					lat: this.lat,
					lng: this.lng
				},
				success: res => {
					this.weather = res;
				},
				fail: err => {
					console.log(err);
				},
				complete: () => {
					uni.stopPullDownRefresh();
				}
			});
		},
		authSetting(t) {
			let _this = this;
			uni.getSetting({
				success(res) {
					if (res.authSetting['scope.userLocation']) {
						console.log('userLocation位置功能已授权');
						// 如果已授权,直接获取对应参数
						if (t == 'pull' || !_this.weather) {
							_this.getLocation();
						}
					} else if (!res.authSetting['scope.userLocation']) {
						// 说明此时要获取的位置功能尚未授权,
						// 则设置进入页面时主动弹出，直接授权
						uni.authorize({
							scope: 'scope.userLocation',
							success(res) {
								// 授权成功
								console.log(res);
								// 成功后获取对应的位置参数
								_this.getLocation();
							},
							fail() {
								console.log('位置授权失败');
								uni.showModal({
									content: '检测到您没打开获取信息功能权限，是否去设置打开？',
									confirmText: '确认',
									cancelText: '取消',
									success: res => {
										console.log(res);
										if (res.confirm) {
											uni.openSetting({
												success: res => {
													console.log(res);
												},
												fail: err => {
													console.log(err);
												}
											});
										} else {
											console.log('取消');
										}
									}
								});
							}
						});
					}
				},
				fail() {
					console.log('获取授权信息授权失败');
				}
			});
		}
	}
};
</script>

<style lang="scss">
.swiper {
	height: 400rpx;
	.weather {
		background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
		color: #ffffff;
		padding: 0 50rpx;
		.left {
			align-items: flex-start;
			.temp {
				font-size: 80rpx;
				line-height: 80rpx;
			}
			.text {
				font-size: 40rpx;
				line-height: 40rpx;
				margin-left: 30rpx;
			}
			.location {
				margin-top: 30rpx;
				font-size: 30rpx;
				line-height: 30rpx;
			}
		}
		.right {
			align-items: flex-end;
			.icon {
				width: 200rpx;
			}
		}
	}
}
.list {
	padding: 20rpx 32rpx;
	.item {
		width: 48%;
		height: 200rpx;
		color: #ffffff;
		font-weight: bold;
		margin-bottom: 20rpx;
		&:nth-child(1) {
			background: $tian-color-mangoyellow;
		}
		&:nth-child(2) {
			background: $tian-color-lotuscolor;
		}
	}
}
</style>
